<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class绑定数组(对象)</title>
</head>

<body>
    <h1>class绑定数组(对象)</h1>
    <div>
        <a href="/">回目录</a>
    </div>
    <hr>
    <div id="app">
        <div :class="[{active: isActive}, errorClass]"> Hello Vue！</div>

        <div>

            <label>
                isActive
                <input v-model="isActive" type="checkbox">
            </label>
            <label>
                hasError
                <input v-model="errorClass">
            </label>
        </div>
    </div>
    <script src="/node_modules/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isActive: true,
                errorClass: "text-danger"
            }
        });
    </script>
    <style>
        .active {
            background-color: green;
        }

        .text-danger {
            color: red;
        }

        .text-warn {
            color: orange;
        }
    </style>
</body>

</html>